<template>
  <header class="app-header">
    <va-navbar class="navbar sailing-navbar">
      <template #left>
        <router-link to="/" class="logo">
          <img src="../assets/img/icon_logo.png" alt="表情宝库 Logo" class="logo-image" />
          <span class="logo-text">斗图王</span>
        </router-link>
      </template>

      <template #center>
        <div class="nav-links">
          <router-link
            v-for="link in navLinks"
            :key="link.path"
            :to="link.path"
            class="nav-link"
            active-class="active"
          >
            <va-icon :name="link.icon" />
            <span>{{ link.name }}</span>
          </router-link>
        </div>
      </template>

      <!-- <template #right>
        <div class="header-actions">
          <router-link to="/admin" class="admin-link">
            <va-button 
              color="primary" 
              icon="admin_panel_settings"
              small
            >
              管理后台
            </va-button>
          </router-link>
        </div>
      </template> -->
    </va-navbar>
  </header>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useAuth } from '../composables/useAuth'

const { isAuthenticated, user } = useAuth()

const navLinks = [
  {
    name: '首页',
    path: '/',
    icon: 'home'
  },
  {
    name: '搜索',
    path: '/search',
    icon: 'search'
  },
  {
    name: '最新',
    path: '/latest',
    icon: 'access_time'
  },
  // {
  //   name: '热门',
  //   path: '/popular',
  //   icon: 'trending_up'
  // }
]
</script>

<style scoped>
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar {
  padding: 0.5rem 1rem;
}

.sailing-navbar {
  background-color: var(--color-sailing-blue);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: white;
}

.logo-image {
  height: 32px;
}

.logo-text {
  color: var(--color-sailing-blue);
  font-size: 1.25rem;
  font-weight: bold;
}

.nav-links {
  display: flex;
  gap: 1rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  color: black;
  text-decoration: none;
  transition: all 0.2s;
}

.nav-link:hover {
  color: black;
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
  color: white;
  background-color: var(--color-sailing-teal);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-link {
  text-decoration: none;
}

@media (max-width: 768px) {
  .nav-link span {
    display: none;
  }

  .logo-text {
    display: none;
  }
}
</style>
